<template>
  <div class="app-container">
    <div class="page-card top-tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          label="考试概览"
          name="ksgl"
          v-if="$auth.hasRole('admin')"
        ></el-tab-pane>
        <el-tab-pane
          label="参试学校"
          name="csxx"
          v-if="
            $auth.hasRole('admin') ||
            $auth.hasExamPermi('reviewing:teachers:csxx')
          "
        ></el-tab-pane>
        <el-tab-pane
          label="评阅教师管理"
          name="pyjsgl"
          v-if="
            $auth.hasRole('admin') ||
            $auth.hasExamPermi('reviewing:teachers:jsgl')
          "
        ></el-tab-pane>
        <el-tab-pane
          label="考生管理"
          name="xsgl"
          v-if="
            $auth.hasRole('admin') ||
            $auth.hasExamPermi('reviewing:teachers:ksgl')
          "
        ></el-tab-pane>
      </el-tabs>
    </div>

    <div class="page-card">
      <div class="page-header">
        <div>
          <h3 class="page-title">
            {{ xmxx.examName }}
          </h3>
          <div class="header-info">
            <p><span>时间：</span>{{ xmxx.startTime }} - {{ xmxx.endTime }}</p>
            <p>
              <span>年级：</span>
              {{ selectDictLabel(dict.type.grade, xmxx.grade) }}
            </p>
            <p>
              <span>考试类型：</span
              >{{ selectDictLabel(dict.type.type, xmxx.examType) }}
            </p>
            <p>
              <span>考试模式：</span
              >{{ selectDictLabel(dict.type.mode, xmxx.projectMode) }}
              {{ xmxx.selectTypeName }}
            </p>
          </div>
        </div>
        <el-button type="primary" @click="edit" v-hasRole="['admin']"
          >编辑项目</el-button
        >
      </div>
      <component
        ref="component"
        v-if="xmxx.id"
        :xmxx="xmxx"
        :xmxklb="xklb"
        :is="activeComponents"
        :qbxklb="qbxklb"
      ></component>
    </div>

    <el-dialog
      ref="editDialog"
      class="editKmVisible"
      title="编辑项目"
      :visible.sync="editKmVisible"
      width="520px"
      :before-close="beforeClose"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="rules"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="项目名称" prop="examName">
          <el-input v-model="editForm.examName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目时间" prop="examTime">
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="editForm.examTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属年级" prop="grade">
          <el-select v-model="editForm.grade">
            <el-option
              v-for="dict in dict.type.grade"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          /></el-select>
        </el-form-item>
        <el-form-item label="项目类型" prop="examType">
          <el-select v-model="editForm.examType">
            <el-option
              v-for="dict in dict.type.type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目模式" prop="projectMode">
          <el-select v-model="editForm.projectMode">
            <el-option
              v-for="dict in dict.type.mode"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          /></el-select>
        </el-form-item>
        <el-form-item label="选科类型" prop="selectType">
          <el-select v-model="editForm.selectType" disabled>
            <el-option
              v-for="dict in xklxlb"
              :key="dict.id"
              :label="dict.groupName"
              :value="dict.id.toString()"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分数线(多选)" prop="scoreBarList">
          <el-select v-model="editForm.scoreBarList" multiple>
            <el-option
              v-for="dict in scoreBar"
              :key="dict"
              :label="dict"
              :value="dict"
          /></el-select>
        </el-form-item>
        <!-- <el-form-item label="选择考试" prop="examSubjectList">
          <el-select v-model="editForm.examSubjectList" multiple disabled>
            <el-option
              v-for="dict in qbxklb"
              :key="dict.subjectId"
              :label="dict.subjectName"
              :value="dict.subjectId"
          /></el-select>
        </el-form-item> -->
        <el-form-item label="总分" prop="fullMark">
          <el-input v-model="editForm.fullMark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">返 回</el-button>
        <el-button type="primary" @click="editSubmit" :loading="loading"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { grouplist } from "@/api/jcgl/xkgl";
import { subjectlistselect } from "@/api/common";
import { exammainEdit } from "@/api/xmgl";
import csxx from "./csxx.vue";
import ksgl from "./ksgl.vue";
import pyjsgl from "./pyjsgl.vue";
import xsgl from "./xsgl.vue";
export default {
  name: "Project_ksgl",
  components: {
    ksgl,
    csxx,
    pyjsgl,
    xsgl,
  },

  dicts: ["grade", "type", "mode"],
  data() {
    return {
      firstLoad: true,
      loading: false,
      xmxx: {},
      activeName: "",
      activeComponents: "",

      editKmVisible: false,
      scoreBar: [
        "清北线",
        "985线",
        "211线",
        "特控(一本)线",
        "本科(二本)线",
        "专科线",
      ],
      editForm: {
        examName: "",
        examTime: null,
        grade: "",
        examType: "",
        projectMode: "",
        selectType: "",
        scoreBarList: [],
        fullMark: null,
        // examSubjectList: [],
      },
      rules: {
        examName: [
          { required: true, message: "项目名称不能为空", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              const regex = /^[\u4e00-\u9fa5a-zA-Z0-9\s]+$/;
              if (!regex.test(value)) {
                callback(new Error("项目名称不允许输入符号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        examTime: [
          { required: true, message: "项目时间不能为空", trigger: "change" },
        ],
        grade: [
          { required: true, message: "所属年级不能为空", trigger: "change" },
        ],
        examType: [
          { required: true, message: "项目类型不能为空", trigger: "blur" },
        ],
        projectMode: [
          { required: true, message: "项目模式不能为空", trigger: "change" },
        ],
        selectType: [
          { required: true, message: "选科类型不能为空", trigger: "change" },
        ],
        scoreBarList: [
          { required: true, message: "分数线不能为空", trigger: "change" },
        ],
        fullMark: [
          { required: true, message: "总分不能为空", trigger: "change" },
        ],
        // examSubjectList: [
        //   { required: true, message: "考试不能为空", trigger: "change" },
        // ],
      },

      xklxlb: [],
      qbxklb: [],

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 86400000;
        },
      },
    };
  },

  computed: {
    xklb() {
      let xklb = [];
      if (this.xmxx.selectType && this.xklxlb.length > 0) {
        let obj = this.xklxlb.filter((item) => {
          return this.xmxx.selectType == item.id;
        })[0];

        let examSubjects = obj.examSubjects ? obj.examSubjects.split(",") : [];
        let basicChooseSubject;
        if (obj.basicChooseSubject) {
          basicChooseSubject = obj.basicChooseSubject.map((item) => {
            return item.selectSubjectIds.split(",");
          });
          basicChooseSubject = basicChooseSubject.reduce((acc, curr) => {
            return acc.concat(curr);
          }, []);
          examSubjects = examSubjects.concat(basicChooseSubject);
        }
        this.qbxklb.map((item) => {
          if (examSubjects.indexOf(item.subjectId.toString()) != -1) {
            xklb.push(item);
          }
        });
      }
      return xklb;
    },
  },
  created() {
    this.$store.dispatch("getXmxx").then((res) => {
      this.xmxx = res;

      if (this.$auth.hasRole("admin")) {
        this.activeName = "ksgl";
        this.activeComponents = "ksgl";
      } else if (this.$auth.hasExamPermi("reviewing:teachers:csxx")) {
        this.activeName = "csxx";
        this.activeComponents = "csxx";
      } else if (this.$auth.hasExamPermi("reviewing:teachers:jsgl")) {
        this.activeName = "pyjsgl";
        this.activeComponents = "pyjsgl";
      } else if (this.$auth.hasExamPermi("reviewing:teachers:ksgl")) {
        this.activeName = "xsgl";
        this.activeComponents = "xsgl";
      } else {
        this.$modal.alertError("您的账号没有此页面权限");
      }
    });
    grouplist({ pageNum: 1, pageSize: 9999 }).then((res) => {
      this.xklxlb = res.rows;
    });
    subjectlistselect("-1").then((res) => {
      this.qbxklb = res.data;
    });
  },

  activated() {
    if (!this.firstLoad) {
      this.$refs.component.getList();
    }
    this.firstLoad = false;
  },

  methods: {
    handleClick(tab, event) {
      this.activeComponents = tab.name;
    },

    edit() {
      let row = this.xmxx;
      this.editForm.id = row.id;
      this.editForm.examName = row.examName;
      this.editForm.examTime = [row.startTime, row.endTime];
      this.editForm.examType = row.examType;
      this.editForm.projectMode = row.projectMode;
      this.editForm.selectType = row.selectType.toString();
      this.editForm.grade = row.grade;
      this.editForm.fullMark = row.fullMark;
      this.editForm.scoreBarList = row.scoreBarList
        ? row.scoreBarList.map((item) => {
            return item.name;
          })
        : [];
      // console.info(this.editForm.scoreBarList, "this.editForm.scoreBarList");
      // this.editForm.examSubjectList = row.examSubjectList.map((item) => {
      //   return item.subjectId;
      // });

      this.editKmVisible = true;
    },

    beforeClose(done) {
      this.editForm = {
        examName: "",
        examTime: null,
        grade: "",
        examType: "",
        projectMode: "",
        selectType: "",
        scoreBarList: [],
        fullMark: null,
      };
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate();
        done();
      });
    },
    handleClose() {
      this.beforeClose(() => {
        this.editKmVisible = false;
      });
    },

    editSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let req = exammainEdit;
          let data = {
            ...this.editForm,
            grade: this.editForm.grade,
            projectType: this.editForm.examType,
          };

          data.startTime = data.examTime[0];
          data.endTime = data.examTime[1];
          // data.examSubjectList = data.examSubjectList.map((item) => {
          //   let xklbFilter = this.xklb.filter((v) => {
          //     return v.subjectId == item;
          //   })[0];

          //   return {
          //     subjectId: xklbFilter.subjectId,
          //     subjectName: xklbFilter.subjectName,
          //   };
          // });

          req(data)
            .then((res) => {
              this.$modal.msgSuccess("操作成功");
              let xmxx = {
                ...this.xmxx,
                examName: data.examName,
                startTime: data.startTime,
                endTime: data.endTime,
                grade: data.grade,
                examType: data.examType,
                projectMode: data.projectMode,
                fullMark: data.fullMark,
                scoreBarList: data.scoreBarList.map((item) => {
                  return { name: item };
                }),
              };
              this.xmxx = xmxx;
              this.$store.dispatch("setXmxx", xmxx).then(() => {
                this.handleClose();
              });
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.editKmVisible {
  .el-input,
  .el-cascader,
  .el-select {
    width: 100%;
  }
}
.page-card {
  & + .page-card {
    margin-top: 14px;
  }
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;

  .header-info {
    display: flex;
    align-items: center;

    p {
      padding: 0 15px;
      border-left: 1px solid #ddd;

      &:first-child {
        padding-left: 0;
        border-left: none;
      }

      span {
        color: rgb(144, 147, 153);
      }
    }
  }
}
</style>
